<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php include("facebook_include.php");?> 
<?php
  $userName = getUserName();
  $userId = getUserId(); 
  $userFirstName = getUserFirstName();
  $userZipCode = getUserZipCode();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Create A Walk</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA9k26g8XMhjW26puIcLupsBSygZ_XFAtISN5Ss7wJV7ACbhOovRSPFegkAdOPapWh78DcBaVnigehzA" type="text/javascript"></script>
	<script src="mapCreateWalk.js" type="text/javascript"></script>
	
	<script src="globalFunctions.js" type="text/javascript"></script>
	
	<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
	
	<link rel="stylesheet" type="text/css" href="stylesheets/createWalk.css" />
	<link rel="stylesheet" type="text/css" href="stylesheets/tabs.css" />	
	<link rel="stylesheet" type="text/css" href="stylesheets/basic.css" />
	
	<script src="http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	jQuery.noConflict();
	var $j = jQuery;
		$j(document).ready(function(){	
			
			$j("#walkName").keydown(function(event) {
			   $j("#nameOfWalk").html($j("#walkName").val());
			});
	});

	</script>
</head>

<body>
  <script type="text/javascript" src="wz_tooltip.js"></script>
	<h1>Share a Walk</h1>
	<div class="motivationInfo">
      <div class="badge" id="badge"><img src="images/trophy.png"/></div>	
      <div class="visitsFavourites">
        <b>Hi <?php echo $userFirstName ?>!</b><br/>
        You are at Level: 1<br />
        Walks visited: 10 <br />
        Walks favorited: 5 
      </div>
    </div>
	<div id="header">
		<ul id="primary">
			<li><a href="home.php">Walker Home</a></li>
			<li><span>Walks</span></li>
			<li><a href="profile.php">Walker Profile</a></li>
			<li><a href="help.php">Help</a></li>
		</ul>
	</div>
	<div id="main">
		<h4 style="margin-top:0px;margin-left:10px;margin-bottom:0px;color:#242424;">Create a New Walk!</h4>
		<div id="contents">
			<div id="nameOfWalk"></div>
			<div id="divMap" class="googleMap"></div>
			<div id='rightPane'>
        <form action="" method="get" id="createWalkForm">
          <h5 style="margin-bottom:-15px;margin-top:2px;margin-left:5px;">Walk name</h5><br/><input type="text" id="walkName" class="walkName" style="margin-left:5px;" value="Name for the walk" onclick="this.value='';" onchange="document.getElementById('nameOfWalk').value=this.value;"/>
          <h5 style="margin-bottom:-15px;margin-top:10px;margin-left:5px;">Walk description</h5><br/><textarea id="walkDesc" class="textarea" style="margin-left:5px;" cols=14 rows=6 >Description</textarea>
          <h5 style="margin-bottom:-15px;margin-top:10px;margin-left:5px;">Walk weather</h5><br/>
            <img class="radioImage" id="sunSafe" src="images/tagSun.png" onMouseOver="Tip('Sun safe');this.src='images/tagSun2.png';" onMouseOut="UnTip();this.src='images/tagSun.png';" onClick = "weatherSelect('sun');" />
            <img class="radioImage" id="rainSafe" src="images/tagRain.png" onMouseOver="Tip('Rain safe');this.src='images/tagRain2.png';" onMouseOut="UnTip();this.src='images/tagRain.png';" onClick = "weatherSelect('rain');"/>
            <img class="radioImage" id="snowSafe" src="images/tagSnow.png" onMouseOver="Tip('Snow safe');this.src='images/tagSnow2.png';" onMouseOut="UnTip();this.src='images/tagSnow.png';" onClick = "weatherSelect('snow');"/>

          <h5 style="margin-bottom:-15px;margin-top:15px;margin-left:5px;">Walk location</h5><br/>
            <img class="radioImage" id="city" src="images/tagCity.png" onMouseOver="Tip('City');this.src='images/tagCity2.png';" onMouseOut="UnTip();this.src='images/tagCity.png'; " onClick ="locationSelect('city');"/>
            <img class="radioImage" id="subUrban" src="images/tagSubUrban.png" onMouseOver="Tip('Sub urban');this.src='images/tagSubUrban2.png';" onMouseOut="UnTip();this.src='images/tagSubUrban.png';" onClick="locationSelect('subUrban');"/>
            <img class="radioImage" id="scenic" src="images/tagScenic.png" onMouseOver="Tip('Scenic');this.src='images/tagScenic2.png';" onMouseOut="UnTip();this.src='images/tagScenic.png';" onClick="locationSelect('scenic');"/>
            
          <h5 style="margin-bottom:-15px;margin-top:15px;margin-left:5px;">Walk slope</h5><br/>
            <img class="radioImage" id="plains" src="images/tagPlain.png" onMouseOver="Tip('Plains');this.src='images/tagPlain2.png';" onMouseOut="UnTip();this.src='images/tagPlain.png';" onClick="terrainSelect('plains');"/>
            <img class="radioImage" id="gentleSlope" src="images/tagGentle.png" onMouseOver="Tip('Gentle slope');this.src='images/tagGentle2.png';" onMouseOut="UnTip();this.src='images/tagGentle.png';" onClick="terrainSelect('gentleSlope');"/>
            <img class="radioImage" id="rugged" src="images/tagRugged.png" onMouseOver="Tip('Rugged');this.src='images/tagRugged2.png';" onMouseOut="UnTip();this.src='images/tagRugged.png';" onClick="terrainSelect('rugged');"/>
          
          <div id="actions" style="margin-top:15px;">
            <table align="Center"><tbody>
              <tr><td><button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="btnSave" onclick="saveWalk();">Save</button></td></tr>
              <tr><td><button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="reset">Reset</button></td></tr>
              <tr><td><button type="button" class="btn" onMouseOver="btnMouseOver(this);" onMouseOut="btnMouseOut(this);" id="cancel">Cancel</button></td></tr>
            </tbody></table>
          </div>
        </form>
			</div>
		</div>
	</div>
	<input type="hidden" id = "uid" value="<?php echo $userId;?>" />
</body>
</html>
